<template>
  <div id="app" class="heart-rate">
    <div class="files-title">
      <h3>心率数据</h3>
    </div>
    <line-bar ref="lineBar" :chartData="chartData" :YAxis="YAxis" v-on="$listeners"></line-bar>
  </div>
</template>
<script>
import LineBar from "../../studentFiles/modules/line-bar.vue";
export default {
  name: 'Sport',
  data() {
    return {
      chartData:[
        {
          legendTitle:"最低心率",
          type:"bar",
          color:["#84F8FF","#8965FD"]
        },
        {
          legendTitle:"最高心率",
          type:"bar",
          color:["#A78DFE","#FF3976"]
        },
        {
          legendTitle:"平均心率",
          type:"bar",
          color:["#B7FF8F","#40D1FF"]
        },
      ],
      YAxis:[
        {
          name:"心率",
          position:"left"
        }
      ],
    }
  },
  props:["dataForm", "data"],
  components: {LineBar},
  
  
  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {
    this.initStudentChart();
  },

  methods: {
    initStudentChart(){
      let categorys = [],xData = [],arr1 = [], arr2 = [], arr3 = [];
      this.data.forEach(item=>{
        if (this.dataForm.classId) {
          categorys.push(item.name);
        }else{
          categorys.push(item.className);
        }
        arr1.push(item.heartMin);
        arr2.push(item.heartMax);
        arr3.push(Math.ceil(item.heartAvg));
      })
      xData.push(arr1, arr2, arr3);
      this.$refs.lineBar.initEChart(categorys,xData);
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
